<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script> -->
  </head>
  <body>
    <div id="app">
      <div v-if="isShow">
      <p >昵称：<input type="text" v-model="name"></p>
      <p >房间号：<input type="text" v-model="room"></p>
        
      <button type="button" @click="enter()" >进入聊天是</button>
      </div>
      <div v-else>
      <ul v-for="(item, index) in lists" :key="'message'+index">
        <li >{{item}}</li>
        
      </ul>
      <li>在线人数：{{num}}</li>
      <div class="ctrl">
        <input type="text"v-model="message" />
        <button type="button" @click="send()">发送</button>
      </div>
    </div>
    
  </body>
  <script>
    var app = new Vue({
      el:'#app',
      data:{
        message:'',
        lists:[],
        ws:{},
        name:'',
        isShow:true,
        num:0,
        room:''
      },
      mounted(){
        this.ws =  new WebSocket('ws://127.0.0.1:3000')
        this.ws.onpen =  this.onOpen
        this.ws.onmessage =  this.onMessage
        this.ws.onclose =  this.onClose
        this.ws.onerror =  this.onError

      },
      methods:{
        onOpen:function(){
          console.log('open:' + this.ws.readyState)
        //发起鉴权请求
        this.ws.send(JSON.stringify({
          event:'auth',
          // message:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6InNzc3MiLCJpYXQiOjE1MTYyMzkwMjJ9.gcb7lzQIqOI_KSZR-3DciS-AfjDyh0S5hBTooqvUu88'
        }))
        },
        onMessage:function(event){
          console.log(event.data);
          var ob = JSON.parse(event.data)
          if(ob.event === 'enter'){
            this.lists.push('欢迎'+ ob.message +'进入聊天室')
          }else if(ob.event ==='out'){
            this.lists.push(ob.name+':'+'退出了群聊')
          }else{
            if(ob.name !==this.name){//后端配置人数所有 必须前端校验发送消息
              this.lists.push(ob.name+':'+ob.message)
          }
          }
          this.num=ob.num
        },
        onClose:function(){
          console.log('close:' + this.ws.readyState)
        },
        onError:function(){
          console.log('error:' + this.ws.readyState)
        },
        //发送消息 
        send:function(){
          this.lists.push(this.name+':'+this.message)
          this.ws.send(JSON.stringify({
            event:'message',
            message:this.message,
            name:this.name
          }))
          this.message = ''
        },
        enter(){
          if(this.name.trim()===''){
            alert('用户名不得为空')
            return
          }
          this.isShow = false
          this.ws.send(JSON.stringify({
            event:'enter',
            message:this.name,
            room:this.room
          }))
        }
      }
    })
  </script>
</html>
